<template>
  <div class="booksItem">
    <img class="book-img" :src="books.src" @click="jump(books.id)" />
    <span class="bookname">{{ books.name }}</span>
    <span class="writer">{{ books.master }}</span>
  </div>
</template>

<script>
export default {
  props: ["books"],
  methods: {
    jump(id) {
        this.$router.push({ name: "bookDetail", params: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.book-img {
  width: 101px;
  height: 135px;
}
.booksItem {
  width: 101px;
  height: 180px;
  margin: 12px;
  margin-top: 0px;
  float: left;
}
.bookname {
  display: block;
  font-size: 14px;
  line-height: 14px;
  margin: 5px 0;
}
.writer {
  display: block;
  font-size: 14px;
  line-height: 14px;
}
</style>